// 引入 react 依赖
import React, { Component, useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { NativeEventEmitter, ScrollView, TextInput, NativeModules, Platform, StyleSheet, Text, View, Image, TouchableOpacity, Alert, Switch, ImageBackground } from 'react-native';
import store from '../../../store/store.js';

// 引入第三方依赖
import _ from 'lodash';
import axios from 'axios';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast, List, Portal, Popover } from '@ant-design/react-native';
const Item = Popover.Item;

// 引入 处理数据 所需文件
import { recommend } from '../../../module/module.js'

// 引入样式
import Style from '../style.js';

// 引入公用组件
import { Layout, Title, NetInfoScene, Results, RefreshScrollView, ScrollableTabBar, SubscribeBtn } from '../../../components/index.js'

// 引入专用组件
import { } from '../components/index.js'

// 引入工具包
import { nblogo, classDefault } from '../../../util/images.js'
import { size, longitude, latitude, ScreenWidth } from '../../../util/utils.js'


class Contract extends Component {

    constructor(props) {
        super(props)
        this.state = {
            recommendList: [],
            orderBy: '',
            refreshing: false
        }
    }

    componentDidMount() {
        this.loading = Toast.loading('加载中', 0)
        this.loadData()
    }

    loadData() {
        const { userInfo } = this.props;
        const { orderBy } = this.state;
        let option = {
            userId: userInfo.id,
        }
        if (orderBy) {
            option['orderBy'] = orderBy
        }
        recommend(option).then(res => {
            console.log(res)
            this.setState({
                recommendList: res.data
            })
        }).finally(() => {
            Portal.remove(this.loading)
            this.setState({
                refreshing: false
            })
        })
    }

    onRefresh = () => {
        this.setState({ refreshing: true });
        this.loadData()
    }

    render() {
        const { recommendList, orderBy, refreshing } = this.state
        return (
            <RefreshScrollView
                style={{}}
                refreshing={refreshing}
                onRefresh={this.onRefresh}
            >
                <View style={{
                    paddingHorizontal: 8,
                    flexDirection: 'row',
                    justifyContent: 'flex-end',
                }}>
                    <Popover
                        overlay={[
                            <Popover.Item value={''}>
                                <Text style={{ fontSize: 12, lineHeight: 17, color: '#8A90A8', paddingHorizontal: 8 }}>推荐</Text>
                            </Popover.Item>,
                            <Popover.Item value={'totalRevenue'}>
                                <Text style={{ fontSize: 12, lineHeight: 17, color: '#8A90A8', paddingHorizontal: 8 }}>收益额</Text>
                            </Popover.Item>,
                            <Popover.Item value={'totalRevenueRate'}>
                                <Text style={{ fontSize: 12, lineHeight: 17, color: '#8A90A8', paddingHorizontal: 8 }}>收益率</Text>
                            </Popover.Item>,
                            <Popover.Item value={'totalAssets'}>
                                <Text style={{ fontSize: 12, lineHeight: 17, color: '#8A90A8', paddingHorizontal: 8 }}>总资产</Text>
                            </Popover.Item>,
                        ]}
                        onSelect={(orderBy) => {
                            this.setState({
                                orderBy
                            }, () => {
                                this.loadData()
                            })
                        }}
                        renderOverlayComponent={nodes => (
                            <View style={{ backgroundColor: '#1C2447', width: 100, }}>
                                <Text style={{ fontSize: 10, lineHeight: 14, color: '#8A90A8', textAlign: 'center', marginTop: 8, marginBottom: 4 }}>排序方式</Text>
                                {nodes}
                            </View>
                        )}
                        triggerStyle={{
                        }}
                        placement={'bottom'}
                    >
                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingHorizontal: 8 }}>
                            {orderBy == '' && (<Text style={{ color: '#97A3FF', fontSize: 14, lineHeight: 20, marginRight: 6 }}>推荐</Text>)}
                            {orderBy == 'totalRevenue' && (<Text style={{ color: '#97A3FF', fontSize: 14, lineHeight: 20, marginRight: 6 }}>收益额</Text>)}
                            {orderBy == 'totalRevenueRate' && (<Text style={{ color: '#97A3FF', fontSize: 14, lineHeight: 20, marginRight: 6 }}>收益率</Text>)}
                            {orderBy == 'totalAssets' && (<Text style={{ color: '#97A3FF', fontSize: 14, lineHeight: 20, marginRight: 6 }}>总资产</Text>)}
                            <Image resizeMode='cover' style={{ width: 12, height: 12 }} source={require('../../../static/images/icon-shaixuan.png')} />
                        </View>
                    </Popover>
                </View>
                {recommendList.map((item, index) => {
                    return (
                        <TouchableOpacity key={index} onPress={() => Actions.userInfo({ userId: item.userId })}>
                            <View style={{ marginHorizontal: 12, borderRadius: 8, overflow: 'hidden', backgroundColor: '#334185', paddingTop: .5, marginTop: 16, marginBottom: 8 }}>
                                <View style={{ backgroundColor: '#181E3A', }}>
                                    <View style={{ backgroundColor: '#232B54', borderRadius: 8, }}>
                                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', }}>
                                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                                <View style={{ paddingHorizontal: 8, paddingVertical: 3, backgroundColor: '#00C898', }}>
                                                    <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>单{item.buyMultiple || 0}倍</Text>
                                                </View>
                                                <View style={{ paddingHorizontal: 8, paddingVertical: 3, backgroundColor: '#FF5757', borderBottomRightRadius: 8, }}>
                                                    <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>空{item.sellMultiple || 0}倍</Text>
                                                </View>
                                            </View>
                                            <SubscribeBtn whether={item.whether} exchangeId={item.exchange} exchangeId={item.id} />
                                        </View>
                                        <View style={{ flexDirection: 'row', alignItems: 'flex-start', marginBottom: 12, paddingLeft: 12 }}>
                                            <TouchableOpacity onPress={() => Actions.userInfo()}>
                                                <View style={{ width: 44, height: 44, position: 'relative' }}>
                                                    {/* <Image resizeMode='cover' style={{ position: 'absolute', width: 18, height: 15, top: -7, left: -1.5 }} source={{ uri: item.headImg || '' }} /> */}
                                                    <View style={{}}>
                                                        <Image resizeMode='cover' source={{ uri: item.headImg || '' }} style={{ width: 44, height: 44, borderRadius: 22, backgroundColor: '#fff' }} />
                                                    </View>
                                                </View>
                                            </TouchableOpacity>
                                            <View style={{ marginLeft: 15 }}>
                                                <View style={{ marginBottom: 8, flexDirection: 'row', }}>
                                                    <Text style={{ fontSize: 14, color: '#E4E4E4', lineHeight: 20, }}>{item.nickName}</Text>
                                                    <View style={{ marginLeft: 12, paddingHorizontal: 8, paddingVertical: 3, borderWidth: .5, borderRadius: 2, borderColor: '#7484FF' }}>
                                                        <Text style={{ fontSize: 10, color: '#7484FF', lineHeight: 14, height: 14 }}>{item.exchangeName}</Text>
                                                    </View>
                                                </View>
                                                <View style={{ flexDirection: 'row', alignItems: 'center', }}>
                                                    <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, }}>{item.signature || ''}</Text>
                                                </View>
                                            </View>
                                        </View>
                                    </View>
                                </View>
                                <View style={{ backgroundColor: '#181E3A', height: 65, flexDirection: 'row', alignItems: 'center', }}>
                                    <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>总资产</Text>
                                        <Text style={{ fontSize: 14, color: '#FFFFFF', lineHeight: 20, }}>${item.totalAssets || 0}</Text>
                                    </View>
                                    <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>收益率</Text>
                                        <Text style={{ fontSize: 14, color: item.totalRevenueRate >= 0 ? '#00C898' : '#FF5757', lineHeight: 20, }}>{item.totalRevenueRate || 0}%</Text>
                                    </View>
                                    <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>收益额</Text>
                                        <Text style={{ fontSize: 14, color: item.totalRevenueRate >= 0 ? '#00C898' : '#FF5757', lineHeight: 20, }}>${item.totalRevenue || 0}</Text>
                                    </View>
                                </View>
                            </View>
                        </TouchableOpacity>
                    )
                })}
            </RefreshScrollView>
        )
    }

}


// <TouchableOpacity onPress={() => Actions.positionDetails()}>
// <View style={{ marginHorizontal: 12, borderRadius: 8, overflow: 'hidden', backgroundColor: '#334185', paddingTop: .5, marginTop: 16, marginBottom: 8 }}>
// <View style={{ backgroundColor: '#181E3A', }}>
// <View style={{ backgroundColor: '#232B54', borderRadius: 8, }}>
// <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingTop: 12, paddingHorizontal: 12 }}>
// <View style={{ paddingHorizontal: 8, paddingVertical: 3, backgroundColor: '#FF5757', borderRadius: 2, }}><Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>空2.84倍</Text></View>
// <Text style={{ flex: 1, fontSize: 14, color: '#fff', lineHeight: 20, marginLeft: 12 }}>OKEx ETH/USD季度</Text>
// <View style={{ paddingHorizontal: 8, paddingVertical: 3, backgroundColor: '#7484FF', borderRadius: 2, }}><Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>平</Text></View>
// </View>
// <View style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 16 }}>
// <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
// <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>总资产</Text>
// <Text style={{ fontSize: 14, color: '#00C898', lineHeight: 20, }}>$306521</Text>
// </View>
// <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
// <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>总资产</Text>
// <Text style={{ fontSize: 14, color: '#00C898', lineHeight: 20, }}>$306521</Text>
// </View>
// </View>
// </View>
// </View>
// <View style={{ backgroundColor: '#181E3A', height: 65, flexDirection: 'row', alignItems: 'center', }}>
// <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
// <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>总资产</Text>
// <Text style={{ fontSize: 14, color: '#FFFFFF', lineHeight: 20, }}>$306521</Text>
// </View>
// <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
// <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>总资产</Text>
// <Text style={{ fontSize: 14, color: '#07C69A', lineHeight: 20, }}>$306521</Text>
// </View>
// <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
// <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>总资产</Text>
// <Text style={{ fontSize: 14, color: '#07C69A', lineHeight: 20, }}>$306521</Text>
// </View>
// </View>
// </View>
// </TouchableOpacity>
export default connect(({ userInfo }) => ({
    userInfo
}))(Contract)
